<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ElementPlus 组件实例属性与方法获取</title>
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <style>
        :root {
            --primary-color: #409EFF;
            --secondary-color: #2C2C32;
            --sidebar-bg: #304156;
            --sidebar-text: #bfcbd9;
            --sidebar-active: #409EFF;
            --header-height: 48px;
            --sidebar-width: 220px;
            --border-color: #252526;
            --hover-color: #333337;
            --selected-color: #37373D;
            --text-color: #CCCCCC;
            --text-secondary: #858585;
            --bg-color: #1E1E1E;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", Arial, sans-serif;
        }
        
        body {
            background-color: var(--bg-color);
            color: var(--text-color);
            height: 100vh;
            overflow: hidden;
        }
        
        #app {
            display: flex;
            flex-direction: column;
            height: 100vh;
        }
        
        .app-header {
            background-color: var(--secondary-color);
            padding: 12px 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            z-index: 100;
        }
        
        .header-title {
            display: flex;
            align-items: center;
            font-size: 18px;
            font-weight: 600;
            color: var(--primary-color);
        }
        
        .app-container {
            display: flex;
            flex: 1;
            overflow: hidden;
        }
        
        .component-panel {
            width: 300px;
            background-color: var(--secondary-color);
            border-right: 1px solid var(--border-color);
            overflow-y: auto;
            padding: 15px;
        }
        
        .component-item {
            background-color: #252526;
            border: 1px solid var(--border-color);
            border-radius: 4px;
            padding: 12px;
            margin-bottom: 10px;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .component-item:hover {
            border-color: var(--primary-color);
            background-color: var(--hover-color);
        }
        
        .component-item.selected {
            border-color: var(--primary-color);
            background-color: var(--selected-color);
        }
        
        .component-icon {
            font-size: 20px;
            color: var(--primary-color);
            margin-right: 10px;
        }
        
        .preview-area {
            flex: 1;
            padding: 20px;
            overflow: auto;
            background: #f5f7fa;
        }
        
        .preview-container {
            background: white;
            border-radius: 4px;
            box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
            min-height: calc(100vh - 140px);
            padding: 25px;
        }
        
        .property-panel {
            width: 350px;
            background-color: var(--secondary-color);
            border-left: 1px solid var(--border-color);
            overflow: auto;
            padding: 15px;
        }
        
        .property-group {
            margin-bottom: 20px;
        }
        
        .group-title {
            font-size: 14px;
            font-weight: 600;
            color: var(--text-secondary);
            margin-bottom: 12px;
            padding-bottom: 8px;
            border-bottom: 1px solid var(--border-color);
        }
        
        .property-item {
            margin-bottom: 15px;
            padding: 10px;
            background-color: #252526;
            border-radius: 4px;
        }
        
        .property-label {
            font-size: 12px;
            color: var(--text-secondary);
            margin-bottom: 5px;
        }
        
        .property-value {
            font-size: 13px;
            font-family: monospace;
            word-break: break-all;
            white-space: pre-wrap;
        }
        
        .method-item {
            padding: 8px;
            background-color: #252526;
            border-radius: 4px;
            margin-bottom: 10px;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .method-item:hover {
            background-color: var(--hover-color);
        }
        
        .method-name {
            font-size: 13px;
            font-weight: 500;
            color: var(--primary-color);
        }
        
        .method-description {
            font-size: 12px;
            color: var(--text-secondary);
            margin-top: 5px;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="app-header">
            <div class="header-title">
                <i class="el-icon-s-operation"></i>
                <span>ElementPlus 组件实例属性与方法获取</span>
            </div>
        </div>
        
        <div class="app-container">
            <div class="component-panel">
                <div class="component-item" @click="selectComponent('button')">
                    <i class="el-icon-position component-icon"></i>
                    <span>按钮组件</span>
                </div>
                
                <div class="component-item" @click="selectComponent('input')">
                    <i class="el-icon-edit component-icon"></i>
                    <span>输入框组件</span>
                </div>
                
                <div class="component-item" @click="selectComponent('select')">
                    <i class="el-icon-menu component-icon"></i>
                    <span>选择器组件</span>
                </div>
                
                <div class="component-item" @click="selectComponent('table')">
                    <i class="el-icon-s-grid component-icon"></i>
                    <span>表格组件</span>
                </div>
                
                <div class="component-item" @click="selectComponent('dialog')">
                    <i class="el-icon-full-screen component-icon"></i>
                    <span>对话框组件</span>
                </div>
            </div>
            
            <div class="preview-area">
                <div class="preview-container">
                    <el-row :gutter="20">
                        <el-col :span="8">
                            <el-card shadow="hover">
                                <template #header>
                                    <div>按钮组件</div>
                                </template>
                                <el-button ref="buttonRef" type="primary" @click="showButtonInfo">
                                    获取按钮属性
                                </el-button>
                            </el-card>
                        </el-col>
                        
                        <el-col :span="8">
                            <el-card shadow="hover">
                                <template #header>
                                    <div>输入框组件</div>
                                </template>
                                <el-input ref="inputRef" v-model="inputValue" placeholder="请输入内容"></el-input>
                            </el-card>
                        </el-col>
                        
                        <el-col :span="8">
                            <el-card shadow="hover">
                                <template #header>
                                    <div>选择器组件</div>
                                </template>
                                <el-select ref="selectRef" @change="selectChange"  v-model="selectValue" placeholder="请选择">
                                    <el-option
                                        v-for="item in options"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-card>
                        </el-col>
                    </el-row>
                    
                    <el-row :gutter="20" style="margin-top: 20px;">
                        <el-col :span="12">
                            <el-card shadow="hover">
                                <template #header>
                                    <div>表格组件</div>
                                </template>
                                <el-table ref="tableRef" :data="tableData" border style="width: 100%">
                                    <el-table-column prop="date" label="日期" width="180"></el-table-column>
                                    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
                                    <el-table-column prop="address" label="地址"></el-table-column>
                                </el-table>
                            </el-card>
                        </el-col>
                        
                        <el-col :span="12">
                            <el-card shadow="hover">
                                <template #header>
                                    <div>对话框组件</div>
                                </template>
                                <el-button type="primary" @click="dialogVisible = true">打开对话框</el-button>
                                
                                <el-dialog ref="dialogRef" v-model="dialogVisible" title="提示">
                                    <span>这是一个对话框</span>
                                    <template #footer>
                                        <span class="dialog-footer">
                                            <el-button @click="dialogVisible = false">取消</el-button>
                                            <el-button type="primary" @click="dialogVisible = false">确定</el-button>
                                        </span>
                                    </template>
                                </el-dialog>
                            </el-card>
                        </el-col>
                    </el-row>
                </div>
            </div>
            
            <div class="property-panel">
                <div class="property-group">
                    <div class="group-title">组件属性</div>
                    <div class="property-item" v-for="(value, key) in componentProperties" :key="key">
                        <div class="property-label">{{ key }}</div>
                        <div class="property-value">{{ value }}</div>
                    </div>
                </div>
                
                <div class="property-group">
                    <div class="group-title">组件方法</div>
                    <div class="method-item" v-for="method in componentMethods" :key="method.name" @click="invokeMethod(method)">
                        <div class="method-name">{{ method.name }}</div>
                        <div class="method-description">{{ method.description }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 引入Vue 3 -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <!-- 引入Element Plus -->
    <script src="https://unpkg.com/element-plus/dist/index.full.js"></script>
    
    <script>
        const { createApp, ref, onMounted } = Vue;
        const { ElButton} = ElementPlus;

        const app = createApp({
            setup() {
                var optionVals=[];
                for (var d in ElementPlus){
                    if(d.startsWith('El') && typeof ElementPlus[d] === 'object'){
                        optionVals.push( { value: d, label:d });
                    }
                }
                // 组件引用
                const buttonRef = ref(null);
                const inputRef = ref(null);
                const selectRef = ref(null);
                const tableRef = ref(null);
                const dialogRef = ref(null);
                
                // 状态数据
                const inputValue = ref('');
                const selectValue = ref('');
                const dialogVisible = ref(false);
                const selectedComponent = ref('');
                const componentProperties = ref({});
                const componentMethods = ref([]);
                
                // 选项数据
                const options = ref(optionVals);
                
                // 表格数据
                const tableData = ref([
                    { date: '2023-06-01', name: '张三', address: '上海市普陀区金沙江路 1518 弄' },
                    { date: '2023-06-02', name: '李四', address: '上海市普陀区金沙江路 1517 弄' },
                    { date: '2023-06-03', name: '王五', address: '上海市普陀区金沙江路 1519 弄' }
                ]);
                
                // 组件方法映射
                const componentMethodsMap = {
                    button: [
                        { name: 'focus', description: '使按钮获取焦点', action: () => buttonRef.value.focus() },
                        { name: 'blur', description: '使按钮失去焦点', action: () => buttonRef.value.blur() }
                    ],
                    input: [
                        { name: 'focus', description: '使输入框获取焦点', action: () => inputRef.value.focus() },
                        { name: 'blur', description: '使输入框失去焦点', action: () => inputRef.value.blur() },
                        { name: 'select', description: '选中输入框内容', action: () => inputRef.value.select() }
                    ],
                    select: [
                        { name: 'focus', description: '使选择器获取焦点', action: () => selectRef.value.focus() },
                        { name: 'blur', description: '使选择器失去焦点', action: () => selectRef.value.blur() }
                    ],
                    table: [
                        { name: 'clearSort', description: '清除表格排序状态', action: () => tableRef.value.clearSort() },
                        { name: 'clearFilter', description: '清除表格过滤条件', action: () => tableRef.value.clearFilter() },
                        { name: 'toggleRowSelection', description: '切换行的选中状态', action: () => {
                            if (tableData.value.length > 0) {
                                tableRef.value.toggleRowSelection(tableData.value[0], true);
                            }
                        }}
                    ],
                    dialog: [
                        { name: 'open', description: '打开对话框', action: () => {
                            dialogVisible.value = true;
                            setTimeout(() => {
                                if (dialogRef.value) {
                                    dialogRef.value.open();
                                }
                            }, 100);
                        }},
                        { name: 'close', description: '关闭对话框', action: () => {
                            if (dialogRef.value) {
                                dialogRef.value.close();
                            }
                        }}
                    ]
                };
                  // 选择组件
                  const selectChange = (e) => {
                    alert('选择了组件：' +JSON.stringify(ElementPlus[e].props));
                  }
                // 选择组件
                const selectComponent = (type) => {
                    selectedComponent.value = type;
                    updateComponentInfo(type);
                };
                
                // 更新组件信息
                const updateComponentInfo = (type) => {
                    let componentRef = null;
                    
                    switch (type) {
                        case 'button':
                            componentRef = buttonRef.value;
                            break;
                        case 'input':
                            componentRef = inputRef.value;
                            break;
                        case 'select':
                            componentRef = selectRef.value;
                            break;
                        case 'table':
                            componentRef = tableRef.value;
                            break;
                        case 'dialog':
                            componentRef = dialogRef.value;
                            break;
                    }
                    
                    if (componentRef) {
                        // 获取组件属性
                        const props = {};
                        for (const key in componentRef) {
                            // 过滤掉非属性和方法
                            if (typeof componentRef[key] !== 'function' && 
                                key !== 'vnode' && 
                                key !== 'ctx' && 
                                key !== 'isUnmounted' && 
                                key !== 'isMounted') {
                                props[key] = componentRef[key];
                            }
                        }
                        componentProperties.value = props;
                        
                        // 获取组件方法
                        componentMethods.value = componentMethodsMap[type] || [];
                    }
                };
                
                // 调用组件方法
                const invokeMethod = (method) => {
                    if (method && method.action) {
                        method.action();
                    }
                };
                
                // 显示按钮信息
                const showButtonInfo = () => {
                    selectComponent('button');
                };
                
                // 初始化时选择按钮组件
                onMounted(() => {
                    selectComponent('button');
                });
                
                return {
                    buttonRef,
                    inputRef,
                    selectRef,
                    tableRef,
                    dialogRef,
                    inputValue,
                    selectValue,
                    dialogVisible,
                    options,
                    tableData,
                    selectedComponent,
                    componentProperties,
                    componentMethods,
                    selectComponent,
                    invokeMethod,
                    showButtonInfo,selectChange
                };
            }
        });
        
        // 使用Element Plus
        app.use(ElementPlus);
        
        // 挂载应用
        app.mount('#app');
    </script>
</body>
</html>